"use client";

import LiteYouTubeEmbed from "react-lite-youtube-embed";
import { Tweet } from "react-tweet";

import { type TMediaEmbedElement } from "platejs";
import { type PlateElementProps } from "platejs/react";

import { parseTwitterUrl, parseVideoUrl } from "@platejs/media";
import { MediaEmbedPlugin, useMediaState } from "@platejs/media/react";
import { ResizableProvider, useResizableValue } from "@platejs/resizable";
import { PlateElement, withHOC } from "platejs/react";

import { cn } from "@/lib/utils";

import { Caption, CaptionTextarea } from "./caption";
import { MediaToolbar } from "./media-toolbar";
import {
  mediaResizeHandleVariants,
  Resizable,
  ResizeHandle,
} from "./resize-handle";

export const MediaEmbedElement = withHOC(
  ResizableProvider,
  function MediaEmbedElement(props: PlateElementProps&lt;TMediaEmbedElement&gt;) {
    const {
      align = "center",
      embed,
      focused,
      isTweet,
      isVideo,
      isYoutube,
      readOnly,
      selected,
    } = useMediaState({
      urlParsers: [parseTwitterUrl, parseVideoUrl],
    });
    const width = useResizableValue("width");
    const provider = embed?.provider;

    return (
      &lt;MediaToolbar plugin={MediaEmbedPlugin}&gt;
        &lt;PlateElement className="py-2.5" {...props}&gt;
          &lt;figure
            className="group relative m-0 w-full cursor-default"
            contentEditable={false}
          &gt;
            &lt;Resizable
              align={align}
              options={{
                align,
                maxWidth: isTweet ? 550 : "100%",
                minWidth: isTweet ? 300 : 100,
              }}
            &gt;
              &lt;ResizeHandle
                className={mediaResizeHandleVariants({ direction: "left" })}
                options={{ direction: "left" }}
              /&gt;

              {isVideo ? (
                isYoutube ? (
                  &lt;LiteYouTubeEmbed
                    id={embed!.id!}
                    title="youtube"
                    wrapperClass={cn(
                      "rounded-sm",
                      focused && selected && "ring-2 ring-ring ring-offset-2",
                      "relative block cursor-pointer bg-black bg-cover bg-center [contain:content]",
                      "[&.lyt-activated]:before:absolute [&.lyt-activated]:before:top-0 [&.lyt-activated]:before:h-[60px] [&.lyt-activated]:before:w-full [&.lyt-activated]:before:bg-top [&.lyt-activated]:before:bg-repeat-x [&.lyt-activated]:before:pb-[50px] [&.lyt-activated]:before:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]",
                      "[&.lyt-activated]:before:bg-[url()]",
                      'after:block after:pb-[var(--aspect-ratio)] after:content-[""]',
                      "[&_&gt;_iframe]:absolute [&_&gt;_iframe]:top-0 [&_&gt;_iframe]:left-0 [&_&gt;_iframe]:size-full",
                      "[&_&gt;_.lty-playbtn]:z-1 [&_&gt;_.lty-playbtn]:h-[46px] [&_&gt;_.lty-playbtn]:w-[70px] [&_&gt;_.lty-playbtn]:rounded-[14%] [&_&gt;_.lty-playbtn]:bg-[#212121] [&_&gt;_.lty-playbtn]:opacity-80 [&_&gt;_.lty-playbtn]:[transition:all_0.2s_cubic-bezier(0,_0,_0.2,_1)]",
                      "[&:hover_&gt;_.lty-playbtn]:bg-[red] [&:hover_&gt;_.lty-playbtn]:opacity-100",
                      '[&_&gt;_.lty-playbtn]:before:border-y-[11px] [&_&gt;_.lty-playbtn]:before:border-r-0 [&_&gt;_.lty-playbtn]:before:border-l-[19px] [&_&gt;_.lty-playbtn]:before:border-[transparent_transparent_transparent_#fff] [&_&gt;_.lty-playbtn]:before:content-[""]',
                      "[&_&gt;_.lty-playbtn]:absolute [&_&gt;_.lty-playbtn]:top-1/2 [&_&gt;_.lty-playbtn]:left-1/2 [&_&gt;_.lty-playbtn]:[transform:translate3d(-50%,-50%,0)]",
                      "[&_&gt;_.lty-playbtn]:before:absolute [&_&gt;_.lty-playbtn]:before:top-1/2 [&_&gt;_.lty-playbtn]:before:left-1/2 [&_&gt;_.lty-playbtn]:before:[transform:translate3d(-50%,-50%,0)]",
                      "[&.lyt-activated]:cursor-[unset]",
                      "[&.lyt-activated]:before:pointer-events-none [&.lyt-activated]:before:opacity-0",
                      "[&.lyt-activated_&gt;_.lty-playbtn]:pointer-events-none [&.lyt-activated_&gt;_.lty-playbtn]:opacity-0!",
                    )}
                  /&gt;
                ) : (
                  <div>
                    &lt;iframe
                      className={cn(
                        "absolute top-0 left-0 size-full rounded-sm",
                        isVideo && "border-0",
                        focused && selected && "ring-2 ring-ring ring-offset-2",
                      )}
                      title="embed"
                      src={embed!.url}
                      allowFullScreen
                    /&gt;
                  </div>
                )
              ) : null}

              {isTweet && (
                <div>
                  &lt;Tweet id={embed!.id!} /&gt;
                </div>
              )}

              &lt;ResizeHandle
                className={mediaResizeHandleVariants({ direction: "right" })}
                options={{ direction: "right" }}
              /&gt;
            &lt;/Resizable&gt;

            &lt;Caption style={{ width }} align={align}&gt;
              &lt;CaptionTextarea placeholder="Write a caption..." /&gt;
            &lt;/Caption&gt;
          &lt;/figure&gt;

          {props.children}
        &lt;/PlateElement&gt;
      &lt;/MediaToolbar&gt;
    );
  },
);
